﻿@model Stamp_For_Africa_Version_2.ViewModels.StampIndexFormViewModel


<script src="@Url.Content("/uploadify/swfobject.js")" type="text/javascript"></script>
<script src="@Url.Content("/uploadify/jquery.uploadify.v2.1.4.min.js")" type="text/javascript"></script>
<link href="@Url.Content("/uploadify/uploadify.css")" rel="stylesheet" type="text/css" />

@Html.Hidden("UploadedFileName")
@Html.Hidden("NonRootedUploadedFileName")

<script type="text/javascript">
	$(function () {

		// Uploadify File Upload System
		// SessionSync data is sent in scriptData for security reasons, see UploadifySessionSync() in global.asax

		var UploadifyAuthCookie = '@(Request.Cookies[FormsAuthentication.FormsCookieName] == null ? "" : Request.Cookies[FormsAuthentication.FormsCookieName].Value)';
		var UploadifySessionId = '@Session.SessionID';

		$("#fuFileUploader").uploadify({

			'hideButton': true,       // We use a trick below to overlay a fake html upload button with this hidden flash button                         
			'wmode': 'transparent',
			'uploader': '@Url.Content("/uploadify/uploadify.swf")',
			'cancelImg': '@Url.Content("/uploadify/cancel.png")',
			'buttonText': 'Upload File',
			'script': '@Url.Action("FileUpload", "Home")',
			'multi': true,
			'auto': true,
			'scriptData': { RequireUploadifySessionSync: true, SecurityToken: UploadifyAuthCookie, SessionId: UploadifySessionId },
			'onComplete': function (event, ID, fileObj, response, data) {
				response = $.parseJSON(response);
				if (response.Status == 'OK') {

					$("#UploadedFileName").val(response.returnFile);
					$("#NonRootedFileForSearch").val(response.serverPath);
					$("#UserUploadedFileForSearch").val(response.returnFile);
					$("#NonRootedUploadedFileName").val(response.serverPath);
					$("#StampImage").attr("src", response.serverPath);
					// Put your own handler code here instead of the following...
					$("#dialogUploadStamp").dialog("close");

				}
			},
			'onError': function (event, queueID, fileObj, errorObj) {
				alert("Error!!! Type: [" + errorObj.type + "] Info [" + errorObj.info + "]");
			}
		});
	});

</script>
@*
  -----------------------------------------------------------------------
  Upload Stamp dialog
  -----------------------------------------------------------------------
*@
<div style="display: none;" id="dialogUploadStamp" title="Upload Stamp">
	<div style="position: relative;">
		<input type="button" id="btnUpload" value="Upload File" />
		<div style="position: absolute; top: 4px; left: 3px;">
			<input id="fuFileUploader" name="file_upload" type="file" />
		</div>
	</div>
</div>
<script type="text/javascript">
	$(function () {
		$("#Country").change(function () {
			$('#TheForm').submit();
		});
	});


	function showUploadDialog() {
		$("#dialogUploadStamp").dialog({ width: 400 });
		return false;
	}

	$(function () {
		$("#searchOptions").accordion({ collapsible: true, active: false });
	});
	
</script>

@using (Html.BeginForm("DoSearch", "MyStamps"))
{
	<fieldset class="roundedpanel">
		<legend>Search</legend>
		
		<div>		
		@Html.EditorFor(m => m.SearchText, new { style = "width: 150px;" })
		<button type="submit">Search!</button>
		</div>
			
	</fieldset>

	
	<div id="searchOptions" class="roundedpanel">
			
			<h3><a href="#">Search options and filters</a></h3>
				
			<div>
				<div style="display: inline-block">
					<p>Country</p>
				</div>
				<div style="display: inline-block">
					@Html.DropDownListFor(x => x.SearchCountryId, ViewBag.CountryList as IEnumerable<SelectListItem>, "--All--")
				</div>


				<div style="display: inline-block">
					<p>Category</p>
				</div>
				<div style="display: inline-block">
					@Html.DropDownListFor(x => x.SearchCategoryId, ViewBag.CategoryList as IEnumerable<SelectListItem>, "--All--")
				</div>

				<div>
				Max results to return:
				@Html.TextBox("MaxResults", "10")
				</div>
			</div>


					
				</div>
	
		<div class="roundedpanel">
		
		<p>
			<b>Tip!</b> You can combine an image search with a text search to increase the accuracy of your results.<br />
			If your country, category or currency is not listed, please send me an upload request	here. <br />
		</p>

		<fieldset class="roundedpanel">
			<legend>Image match search</legend>

			Have an image of your stamp? Why not try and <a href="" onclick="return showUploadDialog()"> upload </a>the image and search!<br />
			<img id="StampImage" src=@Model.NonRootedFileForSearch alt="No image uploaded" />
			@Html.HiddenFor(m => m.UserUploadedFileForSearch)
			@Html.HiddenFor(m => m.NonRootedFileForSearch)
			@Html.HiddenFor(m => m.SearchCategoryId)
			@Html.HiddenFor(m => m.SearchCountryId)
			@Html.HiddenFor(m => m.SearchCurrencyId)

		</fieldset>
			

	</div>
}
